<template>
  <div id="popFrom">
    <div class="popBox">
      <el-form label-position="right" label-width="80px" :model="formLabelAlign" :rules="rules" ref="PForm">
        <el-form-item label="活动性质">
          <el-radio-group v-model="formLabelAlign.s_type">
            <el-radio label="餐饮" name="type"></el-radio>
            <el-radio label="娱乐" name="type"></el-radio>
            <el-radio label="演出" name="type"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="场地编号 : ">
          <el-input v-model.trim="formLabelAlign.placeid" disabled></el-input>
        </el-form-item>
        <el-form-item label="租聘人 : ">
          <el-input v-model.trim="formLabelAlign.s_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="介绍 : " prop="s_content">
          <el-input v-model.trim="formLabelAlign.s_content"></el-input>
        </el-form-item>
        <el-form-item label="价格 : " prop="s_price">
          <el-input v-model.trim="formLabelAlign.s_price"></el-input>
        </el-form-item>
        <el-form-item label="图片1 : ">
          <el-input v-model.trim="shangImg1" placeholder="请填写图片的网络地址"></el-input>
        </el-form-item>
        <el-form-item label="图片2 : ">
          <el-input v-model.trim="shangImg2"></el-input>
        </el-form-item>
        <el-form-item label="图片3 : ">
          <el-input v-model.trim="shangImg3"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="btn" el-button type="primary" @click="submitShop">提交入驻</el-button>
          <el-button class="goLogin btn" @click.stop="changeShow">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import qs from 'qs';
export default {
  props: ["changeShow", "areaNum", 'allCenter'],
  data() {
    return {
      shangImg1: "",
      shangImg2: "",
      shangImg3: "",
      formLabelAlign: {
        // 场地编号
        placeid: this.areaNum,
        // 活动类型
        s_type: '',
        // 租聘人
        s_name: this.$store.state.user.username,
        // 活动简介
        s_content: "",
        // 图片
        s_Images: [],
        // 活动价格
        s_price: "",
      },
      rules: {
        s_content: [
          { required: true, message: '内容不可以为空', trigger: 'blur' }
        ],
        s_price: [
          { required: true, message: '内容不可以为空', trigger: 'blur' }
        ],
      }
    };
  },
  mounted() {
    if (this.allCenter !== undefined) {
      this.formLabelAlign = {
        placeid: this.areaNum,
        s_type: this.allCenter.s_type,
        s_name: this.allCenter.s_name,
        s_content: this.allCenter.s_content,
        s_Images: [],
        s_price: this.allCenter.s_price,
      }
      this.shangImg1 = this.allCenter.s_Images[0]
      this.allCenter.s_Images[1] !== undefined && (this.shangImg2 = this.allCenter.s_Images[1])
      this.allCenter.s_Images[2] !== undefined && (this.shangImg3 = this.allCenter.s_Images[2])
    }
  },
  methods: {
    // 登录按钮
    submitShop() {
      if (!this.formLabelAlign.s_type.length) {
        this.$message.error('活动类型不可以为空');
        return
      }
      if (!this.shangImg1) return this.$message.error('至少有一张图片');
      this.$refs.PForm.validate(async (valid) => {
        if (valid) {
          this.formLabelAlign.s_Images.push(this.shangImg1)
          this.shangImg2 !== '' && this.formLabelAlign.s_Images.push(this.shangImg2)
          this.shangImg3 !== '' && this.formLabelAlign.s_Images.push(this.shangImg3)
          let res = await this.$http({
            method: "POST",
            url: 'http://10.3.136.136:8888/selectplace',
            data: qs.stringify(this.formLabelAlign),
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
          })
          //    发送请求去后端登记, 然后调用store里面的方法
          if (res.status.code === 200) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.$store.dispatch('getAllShop')
            this.changeShow()
            return
          }
          this.$message({
            message: res.message,
            type: 'warning'
          });

        }
      })
    }
  }
}
</script>
  
<style lang="scss" scoped>
#popFrom {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);

  .popBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 500px;
    height: 600px;
    padding: 10px 20px;
    box-sizing: border-box;
  }
}
</style>